<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
         .box{
             width: 200px;
             height: 520px;
             margin: 0 auto;
             border: 1px solid lightgray;
         }
         nav{
             height: 30px;
             line-height: 30px;
             background-color: lightgray;
             text-align: center;
         }
         ul{ 
             width: 200px;
             height: 160px;
             margin: 0 auto;
             padding: 0;
             list-style: none;
             position: relative;
              overflow: hidden;   
         }
         li{
             position: absolute; 
             display: flex;
             top:10px;
         }
         img{
              padding: 0 10px; 
         }
         p{
             width: 180px;
             height: 30px;
             line-height: 30px;
            
             position: absolute;
            left: 10px;
              
         }
         a{
             text-decoration: none;
             color: white;
             padding-left: 15px;
         }
         .up{
              top:114px; 
         }
         .down{
             top:145px;
         }
          ul:nth-child(2) p{
             background-color: lightpink;
         }
         ul:nth-child(3) p{
             background-color: lightblue;
         }
         ul:nth-child(4) p{
             background-color: lightsalmon;
         }
    </style>
</head>
<body>
    
    <div class="box">
        <nav>专辑推荐</nav>
        <ul>
            <li>
                <img src="img1/1-1.jpg" alt="">
                <img src="img1/1-2.jpg" alt="">
            </li>
            <p class="up"><a href="#">COCOON/可可尼</a></p>
            <p class="down"><a href="#">几何为网-极致绚烂</a></p>
        </ul>
 
    <ul>
            <li>
                <img src="img1/2-1.jpg" alt="">
                <img src="img1/2-2.jpg" alt="">
            </li>
            <p class="up"><a href="#">可可尼</a></p>
            <p class="down"><a href="#">几何为网</a></p>
        </ul>

    <ul>
            <li>
                <img src="img1/3-1.jpg" alt="">
                <img src="img1/3-2.jpg" alt="">
            </li>
            <p class="up"><a href="#">可可尼</a></p>
            <p class="down"><a href="#">几何为网</a></p>
        </ul>
    </div>

<script src="jquery.js"></script>
</body>
</html>
<script>
    $('ul').hover(function(){
        $(this).find('li').stop().animate({
            left: -200
        },500);
        $(this).find('.up').stop().animate({
            top:145
        },500);
        $(this).find('.down').stop().animate({
            top:114
        },500);

    },function(){
        $(this).find('li').stop().animate({
            left: 0
        },500);
        $(this).find('.up').stop().animate({
            top:114
        },500);
        $(this).find('.down').stop().animate({
            top:145
        },500);
    })
</script>